<template>
	<view id="app">
		<!-- 蓝色表头 -->
		<view class="blue">
			<view class="blue-title">
				<view class="blue-title-first">
					<text class="blue-title-first-text">2.48</text>
				</view>
				<view class="blue-title-second">
					<text class="blue-title-second-text">七日年化收益率</text>
				</view>
			</view>
			<!-- er -->
			<view class="limitdate">
				<view class="limitdate-left">
					<text class="limitdate-left-text">0.6709</text>
					<view class="limitdate-left-day">
						<text class="limitdate-left-texts">万份收益(02-26)</text>
					</view>
				</view>
				<view class="limitdate-right">
					<view class="limitdate-right-s">
						<text class="limitdate-left-text">100.00</text>
					</view>
					<view class="limitdate-right-x">
						<text class="limitdate-left-texts">起购金额</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 白色 -->
		<view class="revolution">
			<view class="revolution-all">
				<view class="revolution-title">
					<view class="revolution-title-view">
					</view>
					<view class="revolution-title-text">
						<text>七日年化收益曲线</text>
					</view>
				</view>
			</view>


			<!-- 标签切换 -->
			<view class="counter">
				<view class="counter-first">
					<view class="counter-first-title">
						基金档案
					</view>
					<view class="counter-first-title1">
						<text class="counter-first-title1-text">交易规则</text>
						<view class="counter-first-title1-bg"></view>
					</view>

					<view class="counter-first-title2">
						常见问题
					</view>
				</view>

				<view class="allreceive">
					<view class="receive">
						<text class="receive-text">购买规则</text>
					</view>
					<view class="revolution-procedure">
						<view class="revolution-procedure-all">
							<view class="revolution-procedure-all-pay">
								<view class="pay-bot pay-bot1"></view>
								<view class="pay-paid">
									<text class="paid-text">T日15点前</text>
								</view>
								<view class="pay-date">
									<text class="pay-date-text">购买</text>
								</view>

							</view>

							<view class="revolution-procedure-all-pay">
								<view class="pay-bot"></view>
								<view class="pay-paid">
									<text class="paid-text">T+1日17点后</text>
								</view>
								<view class="pay-date">
									<text class="pay-date-text">确认份额</text>
								</view>

							</view>

							<view class="revolution-procedure-all-pay">
								<view class="pay-bot"></view>
								<view class="pay-paid">
									<text class="paid-text">T+2日</text>
								</view>
								<view class="pay-date">
									<text class="pay-date-text">查看收益</text>
								</view>

							</view>

							<view class="revolution-procedure-all-pay">
								<view class="pay-bot"></view>
								<view class="pay-paid">
									<text class="paid-text">T+2日起</text>
								</view>
								<view class="pay-date">
									<text class="pay-date-text">可赎回</text>
								</view>

							</view>
						</view>
						<!-- 购买说明 -->
						<view class="emption">
							<view class="emption-info">
								<text class="emption-info-text">
									*T日为交易日，周末和法定节假日不属于T日。若在节
									假日或15点后购买，将于下一个T日生效，确认份额等
									时间点都将顺延一个T日
								</text>
							</view>

						</view>

						<view class="utable">
							<uni-table stripe='true' border='true' emptyText="暂无更多数据">
								<uni-tr>
									<uni-th align="center">金额</uni-th>
									<uni-th align="center">费用</uni-th>
								</uni-tr>
								<uni-tr>
									<uni-td align="center">0≤金额100万</uni-td>
									<uni-td align="center"><text>4.5%</text><text>0.6%</text></uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center">100万 ≤金额>200万</uni-td>
									<uni-td align="center"><text>4%</text><text>0.6%</text></uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center">200万 ≤金额>500万</uni-td>
									<uni-td align="center"><text>0.3%</text><text>0.3%</text></uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center">金额>500万</uni-td>
									<uni-td align="center"><text>1000元</text><text>1000元</text></uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
				</view>
				<!-- 赎回 -->
				<view class="allreceive">
					<view class="receive">
						<text class="receive-text">赎回规则</text>
					</view>
					<view class="revolution-procedure">
						<view class="revolution-procedure-all">
							<view class="revolution-procedure-all-pay">
								<view class="pay-bot pay-bot1"></view>
								<view class="pay-paid">
									<text class="paid-text">T日15点前</text>
								</view>
								<view class="pay-date">
									<text class="pay-date-text">赎回</text>
								</view>

							</view>

							<view class="revolution-procedure-all-pay">
								<view class="pay-bot"></view>
								<view class="pay-paid">
									<text class="paid-text">T+1日17点后</text>
								</view>
								<view class="pay-date">
									<text class="pay-date-text">确认份额及到账金额</text>
								</view>

							</view>

							<view class="revolution-procedure-all-pay">
								<view class="pay-bot"></view>
								<view class="pay-paid">
									<text class="paid-text">T+2日</text>
								</view>
								<view class="pay-date">
									<text class="pay-date-text">24点前到账</text>
								</view>
							</view>

						</view>
						<!-- 赎回说明 -->
						<view class="emption">
							<view class="emption-info">
								<text class="emption-info-text">
									*T日为交易日，周末和法定节假日不属于T日。若在节
									假日或15点后购买，将于下一个T日生效，确认份额等
									时间点都将顺延一个T日
								</text>
							</view>

						</view>

						<view class="utable">
							<uni-table stripe='true' border='true' emptyText="暂无更多数据">
								<uni-tr>
									<uni-th align="center">持有时间</uni-th>
									<uni-th align="center">费用</uni-th>
								</uni-tr>
								<uni-tr>
									<uni-td align="center">7天持有期限≤365天</uni-td>
									<uni-td align="center"><text>0.50%</text></uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center">1年 ≤金额>2年</uni-td>
									<uni-td align="center"><text>0.25%</text></uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center"> 持有时间>2年</uni-td>
									<uni-td align="center"><text>0.00%</text></uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center">0天≤金额>7天</uni-td>
									<uni-td align="center"><text>1000元</text><text>1000元</text></uni-td>
								</uni-tr>
							</uni-table>
						</view>

					</view>

				</view>
				<!-- 运作说明 -->
				<view class="allreceive">
					<view class="receive">
						<text class="receive-text">运作费用</text>
					</view>
					<view class="revolution-procedure">
						<view class="utable">
							<uni-table stripe='true' border='true' emptyText="暂无更多数据">
								<uni-tr>
									<uni-td align="center">管理费</uni-td>
									<uni-td align="center"><text>1.50%</text></uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center">托管费</uni-td>
									<uni-td align="center"><text>0.25%</text></uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td align="center"> 销售服务费</uni-td>
									<uni-td align="center"><text>--</text></uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
				</view>
				<view class="tangfooter">
					<view class="tangfooter-text1">
						<text>基金销售服务由成都于宁基金销售有限公司提供</text>
					</view>
					<view class="tangfooter-text2">
						<text>投资前请详细阅读基金合同，招募说明书，基金的过往业绩不预示其未来表现，
						市场有风险，投资需谨慎</text>
					</view>
					
				</view>
			</view>
			<!-- 底部 -->
			<view class="foot">
				<view class="footer">
					<view class="footer-box footer-box1">
						<image class="footer-img" src="../../../static/images/qiluJIquan/66743x.png" mode=""></image>
					</view>
					<view class="footer-box">
						<image class="footer-img" src="../../../static/images/qiluJIquan/28623x.png" mode=""></image>
					</view>
					<view class="footer-box">
						<button class="footer-box-btn1" type="default">定投</button>
					</view>
					<view class="footer-box">
						<button class="footer-box-btn2" type="default">立即购买</button>
					</view>
				</view>
				<view class="Card-buttom">
				</view>
			</view>
		</view>
		
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	#app {
		width: 750rpx;

		// background-color: #4590ef;
		.blue {
			width: 100%;
			// height: 400rpx;
			background-image: url(../../../static/images/qiluJIquan/47923x.png);
			background-repeat: no-repeat;
			background-size: cover;

		}

		.blue-title {
			.blue-title-first {
				text-align: center;
				padding-top: 50rpx;

				.blue-title-first-text {
					font-size: 60rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}

			.blue-title-second {
				text-align: center;
				margin-top: 10rpx;

				.blue-title-second-text {
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}

		.limitdate {
			display: flex;
			justify-content: space-around;
			margin-bottom: 50rpx;
			margin-top: 40rpx;

			.limitdate-left-text {
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: bold;
			}

			.limitdate-left-texts {
				font-size: 24rpx;
				color: #FFFFFF;
			}

		}

		.revolution {
			width: 100%;
			// height: 600rpx;
			position: absolute;
			top: 350rpx;
			background-color: #FFFFFF;
			border-radius: 50rpx 50rpx 0 0;
			.revolution-all {
				width: 670rpx;
				margin: 0 auto;
			}

			.revolution-title {
				display: flex;
				// justify-content: space-around;
				padding-top: 44rpx;

				.revolution-title-view {
					width: 10rpx;
					height: 50rpx;
					border-radius: 5rpx;
					background-color: #007AFF;
				}

				.revolution-title-text {
					font-size: 40rpx;
					font-weight: bold;
					padding-left: 10rpx;
				}
			}

			.revolution-procedure {
				// width: 670rpx;
				// height: 400rpx;
				margin-right: 30rpx;
				border: 1rpx solid rgb(245, 245, 245);
				border-radius: 10rpx;
				box-shadow: 0, 0, 12rpx, rgba(0, 0, 0, 0.5);

				.revolution-procedure-all {
					display: flex;
					justify-content: space-between;

					.revolution-procedure-all-pay {
						margin-top: 40rpx;
						text-align: center;
						position: relative;
						flex-grow: 1;
						border-top: 1rpx dashed #C0C0C0;
						border-bottom: 1rpx solid #C0C0C0;

						.pay-bot {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							background-color: #C0C0C0;
							position: absolute;
							left: 75rpx;
							top: -8rpx;
						}

						.pay-bot1 {
							background-color: #007AFF;
						}

						.pay-paid {
							margin-top: 20rpx;

						}

						.paid-text {
							font-size: 24rpx;
							color: #ff0000;
						}

						.pay-date {
							margin-top: 18rpx;
							margin-bottom: 30rpx;
						}

						.pay-date-text {
							font-size: 24rpx;
							color: #999999;
						}

					}
				}

				.utable {
					margin-bottom: 30rpx;
				}

				.emption {
					display: flex;
					margin-bottom: 30rpx;

					.emption-title {
						width: 200rpx;
						padding-left: 30rpx;
						margin-top: 10rpx;

						.emption-title-text {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.emption-info {
						margin-left: 30rpx;
						margin-top: 10rpx;

						.emption-info-text {
							font-size: 24rpx;
							color: #333333;
							line-height: 20rpx;
						}
					}
				}
			}

			.counter {
				width: 670rpx;
				margin: 0 auto;

				.counter-first {
					display: flex;
					margin-top: 10rpx;
					background-color: rgb(245, 245, 245);

					.counter-first-title1 {
						margin-top: 10rpx;
						text-align: center;

						.counter-first-title1-text {
							font-size: 32rpx;
							color: #3476f1;
							font-weight: bold;
						}

						.counter-first-title1-bg {
							margin-top: 14rpx;
							margin-bottom: 20rpx;
							width: 60rpx;
							height: 5rpx;
							margin-left: 30rpx;
							background-color: #3476f1;
							border-radius: 5rpx;
						}
					}

					.counter-first-title {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #999999;
						margin-right: 60rpx;
					}

					.counter-first-title2 {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #999999;
						margin-left: 60rpx;
					}
				}

				.allreceive {
					margin-top: 30rpx;
					margin-bottom: 30rpx;
					padding-left: 30rpx;
					border-radius: 10rpx;
					border: 1rpx solid rgb(245, 245, 245);
					box-shadow: 0 0 12rpx, rgba(0, 0, 0, 0.5);
				}

				.receive {
					display: flex;
					// height: 100rpx;
					border-top: 1rpx solid rgb(245, 245, 245);

					.receive-box {
						margin-top: 30rpx;
						margin-bottom: 30rpx;
					}

					.receive-box1 {
						margin-top: 30rpx;
						margin-bottom: 30rpx;
						margin-left: 30rpx;
					}

					.receive-text {
						line-height: 100rpx;
						font-size: 28rpx;
						color: #333333;
					}

					.receive-text1 {
						width: 300rpx;
						font-size: 24rpx;
						color: #999999;
					}

					.receive-text2 {
						font-size: 24rpx;
						color: #333333;

					}

				}
			}


		}

		.utableall {
			// width: 660rpx;
			padding-right: 20rpx;

			.utable {
				// width: 670rpx;
				padding: 0;

				.utable-tr {
					padding: 0;
				}
			}

			.utable-tr-td-img {
				width: 30rpx;
				height: 30rpx;
				padding-right: 20rpx;
			}
		}

		
		.tangfooter{
			.tangfooter-text1{
				font-size: 28rpx;
				color: #666666;
				padding: 10rpx;
			}
			.tangfooter-text2{
				font-size: 24rpx;
				color: #999999;
				padding: 10rpx;
			}
		}
		.foot{
			margin-bottom: 30rpx;
			.footer{
				display: flex;
				justify-content: space-around;
				.footer-box1{
					border-right: 1rpx solid #999999;
				}
				.footer-box{
					height: 88rpx;
					flex-grow: 1;
					text-align: center;
					
					.footer-box-btn1{
						background-color: #e2bc7f;
						border: none;
						border-radius: 0;
					}
					.footer-box-btn2{
						border: none;
						border-radius: 0;
						background-color: #3476f1;
					}
				}
				.footer-img{
					margin-top: 20rpx;
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
		.Card-buttom{
				width: 300rpx;
				height: 10rpx;
				background-color: black;
				position: fixed;
				bottom: 0;
				left: 210rpx;
				border-radius: 10rpx;
			}
	}
</style>
